<!--
 * @Description: 饼图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:51
-->
<template>
  <div>
    <div ref="container" style="height:200px"></div>
  </div>
</template>

<script>
import { Pie } from '@antv/g2plot';
export default {
  data() {
    return {};
  },
  methods: {
    createdPie() {
    const piePlot = new Pie(this.$refs.container, {
  appendPadding: 10,
 data : [
  { type: '在线设备', value: 2 },
  { type: '离线设备', value: 7},
],
  angleField: 'value',
  colorField: 'type',
  radius: 1,
  innerRadius: 0.64,
  meta: {
    value: {
      formatter: (v) => `${v}台`,
    },
  },
  label: {
    type: 'inner',
    offset: '-50%',
    autoRotate: false,
    style: { textAlign: 'center' },
    formatter: ({ percent }) => `${(percent * 9).toFixed(0)}台`,
  },
  statistic: {
    title: {
      offsetY: -8,
    },
    content: {
      offsetY: -4,
    },
  },
  // 添加 中心统计文本 交互
  interactions: [
    { type: 'element-selected' },
    { type: 'element-active' },
    {
      type: 'pie-statistic-active',
      cfg: {
        start: [
          { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
          { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
        ],
        end: [
          { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
          { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
        ],
      },
    },
  ],
});
piePlot.render();
  },
  },
  mounted() {
    this.createdPie();
  },
};
</script>
<style scoped>
</style>